<template>
	<view class="full-page-layout app-page" :style="{
		paddingTop:safetySize.top+'px',
		paddingBottom:safetySize.bottom+'px',
		paddingLeft:safetySize.left+'px',
		paddingRight:safetySize.right+'px',
		height:full?'100vh':'100%',
		width:full?'100vw':'100%',
		backgroundColor:baseBackgroundColor?baseBackgroundColor:'transparent'
	}">
		<view class="full-page-layout-containter" :class="[(gradient&&gradientValue==='default')?'gradient-default':'']" :style="{
			backgroundColor:gradient?'transparent':(backgroundColor?backgroundColor:'transparent'),
			backgroundImage:gradient?(gradientValue!=='default'?gradientValue:'none'):'none'
		}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	name:'fullPageCompontent',
	props:{
		/* 是否启用底色渐变（backgroundImage） */
		gradient:{
			type:Boolean,
			default:false
		},
		/* 底色渐变(backgroundImage)值，css语法，default时使用默认渐变色 */
		gradientValue:{
			type:String,
			default:'default'
		},
		backgroundColor:{
			type:String,
			default:''
		},
		safety:{
			type:Boolean,
			default:true
		},
		full:{
			type:Boolean,
			default:true
		},
		baseBackgroundColor:{
			type:String,
			default:''
		}
	},
	data(){
		return {
			safetySize:{
				top:0,
				bottom:0,
				left:0,
				right:0
			}
		}
	},
	beforeMount(){
		if (this.safety) {
			let safety = this.$store.getters['system/getSafety'];
			if (safety) {
				this.safetySize.top = safety.top
				this.safetySize.bottom = safety.bottom
				this.safetySize.left = safety.left
				this.safetySize.right = safety.right
			} else {
				uni.getSystemInfo({
					success:(res=>{
						if (!res.safeAreaInsets) res.safeAreaInsets = {}
						this.safetySize.top = res.safeAreaInsets.top || 0;
						this.safetySize.bottom = res.safeAreaInsets.bottom || 0;
						this.safetySize.left = res.safeAreaInsets.left || 0;
						this.safetySize.right = res.safeAreaInsets.right || 0;
					})
				})
			}
		}
	}
}
</script>

<style scoped lang="scss">
.full-page-layout{
	.full-page-layout-containter{
		height: 100%;
		overflow: auto;
		position: relative;
		&.gradient-default{
			background-image: linear-gradient(to right, $color-paimary-darken, $color-paimary-middle) !important;
		}
	}
}
</style>